<template>
	<view class="spread flex items-center justify-center" :class="{'box-spread': showFlag}">
		<view class="flex items-center justify-center" style="gap: 40rpx;zoom: 0.8;">
			<view class="flex items-center" style="gap: 20rpx;position: relative;">
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">2</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">1</text>
					</view>
				</view>
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">3</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">切</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">5</text>
					</view>
				</view>
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">4</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">6</text>
					</view>
				</view>
				<image src="./spread15-arrowbox.svg" class="arrowbox" mode="heightFix"></image>
				<text class="road-1">1</text>
				<text class="road-2">2</text>
				<text class="road-3">3</text>
				<text class="road-4">4</text>
				<text class="road-5">5</text>
			</view>
			<view class="flex items-center" style="gap: 20rpx;" v-if="isAch == 1">
				<view class="flex flex-col" style="gap: 20rpx;" v-for="item, idx in list" :key="idx">
					<view class="spread-item flex flex-col items-center" v-for="card, index in item" :key="index">
						<image :src="card.front" mode="widthFix" v-if="card.dir == 0"></image>
						<image :src="card.back" mode="widthFix" v-else></image>
					</view>
				</view>
			</view>
			<view class="flex items-center" style="gap: 20rpx;" v-else>
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>3</text>
							<text>现状</text>
						</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>6</text>
							<text>建议</text>
						</text>
					</view>
				</view>
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>1</text>
							<text>原因</text>
						</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">切</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>2</text>
							<text>过去</text>
						</text>
					</view>
				</view>
				<view class="flex flex-col" style="gap: 20rpx;">
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>4</text>
							<text>未来</text>
						</text>
					</view>
					<view class="spread-item flex flex-col items-center">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>5</text>
							<text>环境</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const list = ref([
		[{
			up: 2,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}, {
			up: 1,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}],
		[{
			up: 3,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}, {
			up: 0,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}, {
			up: 5,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}],
		[{
			up: 4,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}, {
			up: 6,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}]
	])

	onMounted(() => {
		dataFormat()
	})
	const dataFormat = () => {
		list.value.map(arr => {
			arr.map((item) => {
				cardList.value.map((card, idx) => {
					if (item.up == idx) {
						item.dir = card.dir
						item.front = card.tarot.front
						item.back = card.tarot.back
					}
				})
			})
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		padding: 40rpx 0;
		height: auto;
	}

	.spread-item {
		position: relative;
	}

	.arrowbox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 120%;
	}

	.road-1,
	.road-2,
	.road-3,
	.road-4,
	.road-5 {
		font-size: 32rpx;
		position: absolute;
	}

	.road-1 {
		top: 101%;
		left: 74%;
	}

	.road-2 {
		top: 70%;
		left: -25%;
	}

	.road-3 {
		top: -8%;
		left: 30%;
	}

	.road-4 {
		top: 30%;
		left: -26%;
	}

	.road-5 {
		top: 102%;
		left: 42%;
	}
</style>